<script setup lang="ts">
import { effect, onMounted, reactive } from 'vue';
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
let IntervalId:number;
const methods = {
	ticker:1,
	GetEffect: async () => {

		ElMessageBox.alert('程序检测完成，服务器支持'+state.form.query_mode, '', {
			// if you want to disable its autofocus
			// autofocus: false,
			confirmButtonText: 'OK',
			callback: (action: Action) => {
				ElMessage({
					type: 'info',
					message: `action: ${action}`,
				})
			},
		})

		const fetchUpdate = async () => {
			const response = await axios.post('/cuishiboApi3/dig-monitor', state.form);
			state.effect=response.data.status+"\n"+ response.data.dig_results;
		};
		//methods.ticker = setInterval(fetchUpdate, 1500);
		fetchUpdate();
	},
	
	attack: async () => {
		state.attackline='---------------DOT&DOH攻击开始----------------'
		if(state.mode == "0"){
			const { data } = await axios.post('/cuishiboApi2/inject-dns',state.form);
			state.attackline = data.status;
		}else{
			const { data } = await axios.post('/cuishiboApi2/poison-dns',state.form);
			state.attackline = data.status;
		}

	}
};


interface UserForm {
	target_ip: string;
	target_domain: string;
	injection_value: string;
	ttl: number;
	query_mode: string;
}

const state = reactive({
	form: {
		target_ip: '192.168.2.2',
		target_domain: 'www.example.com',
		injection_value: '0.0.0.0',
		ttl: 300,
		query_mode:'doh'
	} as UserForm,
	mode: "0",
    buttonText: '开始攻击',
	buttonStyle: { backgroundColor: ''},
	isAttacking: false,
	effect: '',
	attackline : "",
	polling: false
});
</script>

<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }" class="bread">主页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/DoHT' }" class="bread">DOT&DOH</el-breadcrumb-item>
			<el-breadcrumb-item class="bread">解析数据注入与篡改</el-breadcrumb-item>
		</el-breadcrumb>
	</div>

	<div style="display: flex;">

		<div style="width: 70%;">
			<div class="display-flex j-c-c a-i-c height100">
				<div class="login-form">
					<h1 class="title">信息输入</h1>
					<el-form :model="state.form">

						<el-form :model="state.form" label-width="100px">
							<el-form-item prop="email" label="目标靶机IP">
								<el-input v-model="state.form.target_ip" disabled placeholder="type domain"></el-input>
							</el-form-item>
							<el-form-item prop="email" label="目标域名">
								<el-input v-model="state.form.target_domain" placeholder="type resolver_Ip"></el-input>
							</el-form-item>
							<el-form-item prop="email" label="注入/篡改IP">
								<el-input v-model="state.form.injection_value" placeholder="type attack_ip"></el-input>
							</el-form-item>
							<el-form-item prop="email" label="注入/篡改TTL">
								<el-input v-model="state.form.ttl" placeholder="type attack_ttl"></el-input>
							</el-form-item>
						</el-form>

						<el-radio-group v-model="state.form.query_mode">
							<el-radio value="doh">DOH模式</el-radio>
							<el-radio value="dot">DOT模式</el-radio>
						</el-radio-group>
						<el-form-item class="button-container">

						</el-form-item>
						<el-radio-group v-model="state.mode">
							<el-radio value="0">解析数据注入</el-radio>
							<el-radio value="1">解析数据篡改</el-radio>
						</el-radio-group>

						<el-form-item class="button-container">
							<el-button class="Mybutton" type="primary" @click="methods.attack"
								:style="{ backgroundColor: state.buttonStyle.backgroundColor }">
								{{ state.buttonText }}
							</el-button>
							<el-button class="Mybutton" type="primary" @click="methods.GetEffect">
								更新域名解析效果
							</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>

			<el-scrollbar class="Output">
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item>
						<el-input v-model="state.attackline" placeholder="攻击输出" clearable :rows="15"
							:autosize="{ minRows: 15, maxRows: 15 }" readonly="true" class="OutputBox"
							type="textarea" />
					</el-form-item>
					<el-form-item>
						<el-input v-model="state.effect" placeholder="效果输出" clearable :rows="15"
							:autosize="{ minRows: 15, maxRows: 15 }" readonly="true" class="OutputBox"
							type="textarea" />
					</el-form-item>
				</el-form>
			</el-scrollbar>

		</div>
		<div style="width: 20%;">
			<img src="@/assets/dotdoh.png" alt="tsinghua" style="width: 150%; height: auto;">
		</div>
	</div>
</template>


<style lang="css" scoped>
.login-form {
	width: 600px;
	height: 450px;
	margin: 0 auto;
	padding: 30px;
	border-radius: 2px;
	margin-top: 10px;
	box-shadow: 3px 3px 10px 8px #f1f1f1;
}

.OutputBox {
	font-family: Cascadia;
	width: 545px;
	height: 320px;
	margin: 0 auto;
	padding: 10px;
	border-radius: 2px;
	box-shadow: 3px 3px 10px 8px #f1f1f1;
}

.code-box {
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
}

.bread {
    font-size: 34px;
    color: rgb(67, 166, 166);
}

.Output {
	position: relative;
	margin-top: 10px;
}

.Mybutton {
	text-align: center;
	margin: 0 auto;
	
}

.button-container {
  margin-top: 20px; /* 增加按钮与上方的距离 */
  text-align: center; /* 使按钮居中对齐 */
}

</style>